<template>
  <div>
    <div class="home">
      <SearchBar desabled @onClick="onSearchBarkClick" :hot-search="hotSearch" />

      <HomeCard :data="HomeCard" />
      <HomeBanner
        img="http://www.youbaobao.xyz/book/res/bg.jpg"
        title="ssdddddddddddd"
        subTitle="立即体验"
        @onClick="onBannerClick"
      />

      <div :style="{marginTop:'23px'}">
        <HomeBook
          title="为你推荐"
          :col="3"
          :row="1"
          :data="recommend"
          mode="col"
          btn-text="换一批"
          @onMoreClick="recommendChange('recommend')"
          @onBookClick="onHomeBookClick"
        />
      </div>
      <div :style="{marginTop:'23px'}">
        <HomeBook
          title="免费阅读"
          :col="2"
          :row="2"
          :data="freeRead"
          mode="row"
          btn-text="换一批"
          @onMoreClick="recommendChange('freeRead')"
          @onBookClick="onHomeBookClick"
        />
      </div>
      <div :style="{marginTop:'23px'}">
        <HomeBook
          title="当前最热"
          :col="4"
          :row="1"
          :data="hotBook"
          mode="col"
          btn-text="换一批"
          @onMoreClick="recommendChange('hotBook')"
          @onBookClick="onHomeBookClick"
        />
      </div>
      <div :style="{marginTop:'23px'}">
        <HomeBook
          title="分类"
          :col="2"
          :row="2"
          :data="category"
          mode="category"
          btn-text="查看全部"
          @onMoreClick="onCategoryMoreClick"
          @onBookClick="onHomeBookClick"
        />
      </div>
    </div>

    <Auth v-if="!isAuth"  @getUserInfo="getUserInfo"/>
  </div>
</template>

<script>
import SearchBar from "../../components/home/SearchBar";
// import ImageView from '../../components/base/ImageView'
import HomeCard from "../../components/home/HomeCard";
import HomeBanner from "../../components/home/HomeBanner";
import HomeBook from "../../components/home/HomeBook";
import Auth from "../../components/base/Auth";
import { getHomeData, recommend, freeRead, hotBook } from "../../api";
import { getSetting } from "../../api/wechat";

export default {
  components: {
    HomeBook,
    SearchBar,
    // ImageView
    HomeCard,
    HomeBanner,
    Auth
  },
  data() {
    return {
      hotSearch: "",
      HomeCard: {},

      banner: {},
      recommend: [],
      freeRead: [],
      hotBook: [],
      category: [],
      isAuth:true
    };
  },

  methods: {
    recommendChange(key) {
      switch (key) {
        case "recommend":
          recommend().then(response => {
            this.recommend = response.data.data;
          });
          break;
        case "freeRead":
          recommend().then(response => {
            this.freeRead = response.data.data;
          });
          break;
        case "hotBook":
          hotBook().then(response => {
            this.hotBook = response.data.data;
          });
          break;
      }
    },

    getHomeData() {
      getHomeData({ openId: "1234" }).then(response => {
        const {
          data: {
            hotSearch: { keyword },
            shelf,
            banner,
            recommend,
            freeRead,
            hotBook,
            category,
            shelfCount
          }
        } = response.data;

        this.hotSearch = keyword;

        this.banner = banner;
        this.recommend = recommend;
        this.freeRead = freeRead;
        this.hotBook = hotBook;
        this.category = category;
        this.HomeCard = {
          bookList: shelf,
          num: shelfCount,
          userInfo: {
            avatar: "https://www.youbaobao.xyz/mpvue-res/logo.jpg",
            nickname: "大白兔"
          }
        };
      });
    },

    onHomeBookClick() {
      console.log("book click");
    },
    onBookMoreClick() {
      console.log("more click");
    },
    onSearchBarkClick() {
      //跳转到搜索页面
    },
    onBannerClick() {
      console.log("onBannerClick...");
    },
    getUserInfo(){
     this.getSetting()
      
    },
    getSetting() {
      getSetting(
        "userInfo",
        () => {
          this.isAuth = true
        },
        () => {
          this.isAuth = false
        }
      );
    }
  },
  mounted() {
    // this.getHomeData();
    this.getSetting();
  }
};
</script>

<style lang="scss" scoped>
.book-home {
  margin-top: 23px;
}
</style>
